<template>
  <div v-if="service" id="service_imgs">
    <img v-show="!shown" src="../statics/build/images/serviceShow.png" class="serviceShow" @click="onToggle">
    <img v-show="shown" src="../statics/build/images/serviceHide.png" class="serviceHide" @click="onToggle">
    <transition name="service-ds">
      <div v-show="shown" id="service_ds">
        <img :src="service.user_avatar" class="Avatar">
        <p>{{ service.nickname }}</p>
        <img @click="onCallQQ" src="../statics/build/images/service.png" class="serviceBtn">
      </div>
    </transition>
  </div>
</template>

<script>
import { getCustomerService } from '@/api/public'

export default {
  name: 'CustomerService',
  data() {
    return {
      service: null,
      shown: false,
    }
  },
  created() {
    getCustomerService()
      .then(res => {
        const data = res.data
        if (data.code == 200) {
          this.service = data.data
        }
      })
  },
  methods: {
    onToggle() {
      this.shown = !this.shown
    },
    onCallQQ() {
      let qq
      if (this.service && this.service.user_qq) {
        qq = this.service.user_qq
      } else {
        const qqList = ['3003405106', '3003953112', '3003910802', '3003979102']
        qq = qqList[_.random(qqList.length - 1)]
      }

      const iframe = document.createElement('iframe')
      iframe.style.display = 'none'
      iframe.src = `tencent://message/?uin=${qq}&Site=&menu=yes`
      document.body.appendChild(iframe)
    },
  },
}
</script>

<style lang="scss">
@import '~@/statics/build/css/styles.css';
</style>

<style scoped>
.service-ds-enter-active,
.service-ds-leave-active {
  transition: right 1s;
}

.service-ds-enter,
.service-ds-leave-to {
  right: -250px !important;
}
</style>
